<template>
  <div class="target-box">
    <div class="box-title">
      <div>快捷按钮</div>
    </div>
    <div class="draggable-container">
      <draggable :list="list" class="draggable-box" chosen-class="chosenClass" animation="300" item-key="value"
        @start="onStart" @end="onEnd">
        <template #item="{ element }">
          <a-tooltip :content="element.remark" position="top">
            <div class="draggable-list" :class="!animated && 'animated-fade-up-' + element.value"
              @click="clickele(element.value)">
              <div class="draggable-inner">
                <!-- <SvgIcon :name="element.svg" :size="30" class="svg-box" /> -->
                <img :src="element.png" alt="" srcset="" style="width: 30px;height: 30px;" class="svg-box">
                <div>{{ element.label }}</div>
              </div>
            </div>
          </a-tooltip>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup lang="ts">
const router = useRouter();
import { useUserInfoStore } from "@/store/modules/user-info";
import draggable from "vuedraggable";
const list = ref([
  { value: 0, label: "企业管理", svg: "bilibili", png: "./qiye2.png", remark: "地图上查看企业位置" },
  { value: 1, label: "企业添加", svg: "wechat", png: "./addqiye.png", remark: "快速添加企业信息" },
  { value: 2, label: "危险源添加", svg: "QQ音乐", png: "./weixian.png", remark: "快速添加危险源信息" },
  { value: 3, label: "网关添加", svg: "百度", png: "./addshebei.png", remark: "快速添加网关信息" },
  // { value: 4, label: "优酷", svg: "优酷" },
  // { value: 5, label: "网易云音乐", svg: "网易云音乐" },
  // { value: 6, label: "抖音", svg: "抖音" },
  // { value: 7, label: "西瓜视频", svg: "西瓜视频" },
  // { value: 8, label: "微博", svg: "微博" },
  // { value: 9, label: "豆瓣", svg: "豆瓣" },
  // { value: 10, label: "github", svg: "github" },
  // { value: 11, label: "gitee", svg: "gitee" }
]);
const pickerValue = ref(null);

function clickele(val) {
  let stores = useUserInfoStore();
  stores.removeSharedObject();
  switch (val) {
    case 0:
      router.push("/qiye/qiyeManage2")
      break;
    case 1:

      router.push({ path: "/qiye/qiyeAdd" });
      break;
    case 2:
      router.push({ path: "/qiye/weixianAdd" });
      break;
    case 3:
      router.push({ path: "/project/projectAdd" });
      break;
    default:
      break;
  }
}


const animated = ref(false);

// 拖拽开始
const onStart = () => {
  animated.value = true;
};
// 拖拽结束
const onEnd = () => {
  console.log("拖拽结束");
};
</script>

<style lang="scss" scoped>
.draggable-page {
  display: flex;
  column-gap: $padding;
}

.draggable-container {
  padding: $padding;
  background: $color-bg-1;
  // border-radius: $radius-box-5;
  box-shadow: inset 0 0 0 1px $color-border-2;

  .title {
    margin-bottom: $padding;
    font-weight: bold;
  }

  .draggable-box {
    display: flex;
    flex-wrap: wrap;
    gap: $padding $padding;
    width: 100%;

    .draggable-list {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      background: $color-fill-1;
      border: 1px solid $color-border-2;
      border-radius: 6px;

      .draggable-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .svg-box {
          margin-bottom: $margin;
        }
      }
    }
  }

  .chosenClass {
    color: $color-primary;
  }
}

.scrollbar {
  height: 100%;
}

.target-box {
  // margin-top: $padding;
  width: 100%;

  .target-grade {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 60px;

    &::before {
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      height: 30px;
      content: "";
      background: $color-border-2;
      transform: translateY(-50%);
    }

    .target-grade-innerbox {
      text-align: center;

      .grade-value {
        font-family: AliFangYuanTi;
        font-size: $font-size-title-2;
        font-weight: bold;
        color: $color-danger;
      }
    }
  }

  .target-other {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 60px;

    .target-other-innerbox {
      width: 100px;
    }

    .other-value {
      margin-right: $margin-text;
      font-family: AliFangYuanTi;
      font-weight: bold;
    }

    .target-up {
      color: $color-danger;
      transform: rotate(-90deg);
    }

    .target-down {
      color: $color-success;
      transform: rotate(90deg);
    }
  }

  .target-title {
    margin-top: $margin-text;
    color: $color-text-3;
  }
}

.box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-body-3;
  color: $color-text-1;
  margin-bottom: 10px;
}
</style>
